<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2023-05-16 11:18:05
 * @LastEditTime: 2024-10-31 14:32:44
 * @LastEditors: Dxcr
-->
<template>
  <div class="MapBox_contaniner">
    <div class="d-mapbox" id="d-mapbox"></div>
  </div>
</template>
<script setup>
import {
  onMounted,
  reactive,
  toRefs,
  computed,
  ref,
  watch,
  getCurrentInstance,
  h,
  createApp,
} from "vue";
const { proxy: _this } = getCurrentInstance();
/* mapbox 地图插件 */
import mapboxgl from "@/mapbox/mapbox/mapbox-gl.js";
import MeasureDistanceControl from '@/mapbox/controls/MeasureDistanceControl.js'
import HomeControl from '@/mapbox/controls/HomeControl.js'
import FullScreenControl from '@/mapbox/controls/FullScreenControl.js'
/* turf 地理空间分析库，处理各种地图算法 */
import * as turf from "@turf/turf";
/* 坐标转换 */
import Router from "@/router";

import { ElMessage } from "element-plus";

import mitt from "@/utils/mitt.js";
import useMapboxEffect from "@/components/mapbox/utils/effect.ts";
import AlarmPopup from "@/components/mapbox/popup/AlarmPopup.vue";
import DetectorPopup from "@/components/mapbox/popup/DetectorPopup.vue";
import PlanePopup from "@/components/mapbox/popup/planePopup.vue";
import PipelinePopup from "@/components/mapbox/popup/PipelinePopup.vue";
import ProblemPopup from "@/components/mapbox/popup/ProblemPopup.vue";
import ProblemSation from "@/components/mapbox/popup/ProblemSation.vue";
import emergencyPopup from "@/components/mapbox/popup/emergencyPopup.vue";
import '@lottiefiles/lottie-player';
import SwitchLayer from "@/components/mapbox/plugins/SwitchLayer.vue";
import createVueComponent from '@/utils/createVueComponent.js'
import MapStyle from './layers/MapStyle.js'
import _ from "lodash";

const mapboxEffect = useMapboxEffect();

// 默认站库搜索框隐藏
const props = defineProps({
  center: {},
  stations: {
    default() {
      return [];
    },
  },
  pipelines: {
    default() {
      return [];
    },
  },
  markers: {
    default() {
      return [];
    },
  },
  alarms: {
    default() {
      return [];
    },
  },
  planes: {
    default() {
      return [];
    },
  },
  areas: {
    default() {
      return [];
    },
  },
  camera: {
    default() {
      return [];
    },
  },
  detectors:{
    default() {
      return [];
    },
  },
  switchLayer: {
    default() {
      return true;
    },
  },
  flowSwitch: {
    default() {
      return true;
    },
  },
  search: {
    default() {
      return true;
    },
  },
  pipelinePopup: {
    default() {
      return false;
    },
  },
  mapStyle: {
    default() {
      return false;
    },
  },
});

const emit = defineEmits([
  "clickStation",
  "clickPipeline",
  "clickMarker",
  "clickAlarm",
  "clickCamera",
  "clickFullScreen",
  "clickMap",
]);

//传参
let {
  stations,
  center,
  pipelines,
  markers,
  alarms,
  detectors,
  planes,
  areas,
  camera,
} = toRefs(props);

let gisCenter = [118.552028, 37.560572];
if (center.value && center.value.length > 1) {
  gisCenter = center.value;
}

//定义非监听变量
let map;
let initState = false;
//vue变量
const data = reactive({});
const selectedGHGLngLat = ref();
onMounted(() => {
  //初始化地图
  initMap();
});

function setMapStyle(mapStyle){
  let ms = new MapStyle(mapStyle)
  return ms.getStyle()
}

const mapList = [
  { name: "天地图 卫星影像", layerId: "td_satellite_CVA" },
  { name: "天地图 矢量地图", layerId: "td_satellite_Vec" },
  { name: "天地图 卫星影像", layerId: "td_vetor_CVA" },
  { name: "天地图 矢量地图", layerId: "td_vetor_Vec" },
];

const initMap = async () => {
  let mapStyle = setMapStyle(props.mapStyle);
  map = new mapboxgl.Map({
    container: "d-mapbox",
    style: mapStyle,
    center: gisCenter,
    crs: "EPSG:4326",
    antialias: true,
    projection: "globe", //三维球投影
    //maxBounds: bounds,
  });

  map.flyTo({
    center: gisCenter,
    zoom: 9,
    bearing: 0,
    pitch: 47.5,
    duration: 0,
    essential: true,
  });

  //控件
  //比例尺
  map.addControl(
    new mapboxgl.ScaleControl({
      maxWidth: 80,
      unit: 'metric',
    }),
    'bottom-right'
  );
  // //放大缩小
  map.addControl(new mapboxgl.NavigationControl(), 'top-right');

  map.addControl(
    new HomeControl(()=>{
      resetCenter()
    }),
  );
  map.addControl(
    new FullScreenControl(()=>{
      emit('clickFullScreen')
    }),
  );

  //地图加载完毕
  map.on("load", async () => {
    console.log("中心点", map.getCenter());

    //设置天空盒子
    map.addLayer({
      id: "sky",
      type: "sky",
      paint: {
        "sky-type": "atmosphere",
        "sky-atmosphere-sun": [0.0, 0.0],
        "sky-atmosphere-sun-intensity": 15,
      },
    });

    //设置行政区划==========================
    map.addSource("areas", {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [],
      },
    });
    map.addSource("areas1", {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [],
      },
    });
    map.addLayer({
      id: "areas_outline",
      type: "line",
      source: "areas", //对应上方的addSource的参数1
      layout: {
        "line-join": "round",
        "line-cap": "round",
      },
      paint: {
        "line-color": "#fff",
        "line-width": 0.5,
      },
    });
    map.addLayer({
      id: "areas_outline_1",
      type: "line",
      source: "areas",
      layout: {
        "line-join": "round",
        "line-cap": "round",
      },
      paint: {
        "line-color": "#fff",
        "line-width": 0.5,
      },
    });

    map.addLayer({
      id: "areas1_outline",
      type: "line",
      source: "areas1", //对应上方的addSource的参数1
      layout: {},
      paint: {
        "line-color": ["get", "color"],
        "line-color": "#fff",
        "line-width": 0.5,
        "line-opacity": 0.5,
      },
    });
    map.addLayer({
      id: "areas-extrusion",
      type: "fill-extrusion",
      source: "areas1", //对应上方的addSource的参数1
      layout: {},
      paint: {
        "fill-extrusion-base": 0,
        "fill-extrusion-color": "transparent", //["get", "color"],
        "fill-extrusion-height": 50,
        "fill-extrusion-opacity": 0.1,
      },
    });

    map.addLayer({
      id: "areas-extrusion1",
      type: "fill-extrusion",
      source: "areas1", //对应上方的addSource的参数1
      layout: {},
      paint: {
        "fill-extrusion-base": 1000,
        "fill-extrusion-color": "rgba(255,255,255,0.5)", //["get", "color"],
        "fill-extrusion-height": 50,
        "fill-extrusion-opacity": 0.3,
      },
    });

    //行政区划中心名称
    map.addSource("areas_name", {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [],
      },
    });

    // map.addLayer({
    //   id: "areas_name",
    //   type: "symbol",
    //   source: "areas_name",
    //   maxzoom: 18,
    //   layout: {
    //     "text-field": "{name}",
    //     "text-size": 16,
    //     "text-font": ["Microsoft YaHei Regular"],
    //   },
    //   paint: {
    //     "text-color": "#ffffff",
    //     "text-halo-color": "#000000",
    //     "text-halo-width": 1,
    //   },
    // });
    //====================================================
    //设置站库位置
    map.addSource("stations", {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [],
      },
    });
    map.addLayer({
      id: "station",
      type: "line",
      source: "stations", //对应上方的addSource的参数1
      layout: {
        "line-cap": "round",
        "line-join": "round",
      },
      paint: {
        "line-color": "#0000ff",
        "line-width": 6,
        "line-opacity": 0.8,
      },
    });

    // map.addLayer({
    //   id: "stationName",
    //   type: "symbol",
    //   source: "stations",
    //   layout: {
    //     "text-field": "{name}",
    //     "text-size": 14,
    //     "text-font": ["Microsoft YaHei Regular"],
    //   },
    //   paint: {
    //     "text-color": "#ffffff",
    //     "text-halo-color": "#000000",
    //     "text-halo-width": 1,
    //   },
    // });

    //设置管道
    map.addSource("pipelines", {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [],
      },
    });
    map.addLayer({
      id: 'pipelines',
      type: 'line',
      source: 'pipelines', //对应上方的addSource的参数1
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
      },
      paint: {
        'line-color': '#7CFFB2',
        'line-width': 6,
        'line-opacity': 1,
      },
    });

    //设置点击后的油路管道
    map.addLayer({
      id: "pipelines1",
      type: "line",
      source: "pipelines", //对应上方的addSource的参数1
      layout: {
        "line-cap": "round",
        "line-join": "round",
      },
      filter: ["==", "selected", true],
      paint: {
        "line-color": "#55ff00",
        "line-width": 1,
        "line-opacity": 1,
      },
    });

    // 管线名称
    // map.addLayer({
    //   id: "pipelineName",
    //   type: "symbol",
    //   source: "pipelines",
    //   layout: {
    //     "text-field": "{name}",
    //     "text-size": 16,
    //     "symbol-placement": "line",
    //     "text-font": ["Microsoft YaHei Regular"],
    //   },
    //   paint: {
    //     "text-color": "#ffffff",
    //     "text-halo-color": "#000000",
    //     "text-halo-width": 1,
    //   },
    // });

    //====================================================================

    //设置高后果区
    map.addSource("planes", {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [],
      },
    });

    map.addLayer({
      id: "planes",
      type: "fill",
      source: "planes",
      layout: {},
      paint: {
        "fill-color": ["get", "color"],
        "fill-opacity": 0.8,
      },
    });

    map.addLayer({
      id: "planes_outline",
      type: "line",
      source: "planes", //对应上方的addSource的参数1
      layout: {
        "line-cap": "round",
        "line-join": "round",
      },
      paint: {
        "line-color": ["get", "color"],
        "line-width": 2,
        "line-opacity": 0.8,
      },
    });

    //设置地图信息
    (async () => {
      //设置行政区划
      setAreas(areas.value);
      // //绘制管道
      setPipelines(pipelines.value);
      //绘制场站
      //setStations(stations.value);
      //设置图例
      setMarkers(markers.value);
      // //设置报警
      setAlarms(alarms.value);
      //设置探测仪
      setDetectors(detectors.value)
      //设置高后果区
      setPlanes(planes.value);
      //设置视频监控
      setCamera(camera.value);
    })();

    //油路管线添加hover事件
    map.on("mouseenter", "pipelines", function (e) {
      map.getCanvas().style.cursor = "pointer";
    });

    //添加hover事件
    map.on("mouseleave", "pipelines", function (e) {
      map.getCanvas().style.cursor = "";
    });

    //油路管线添加hover事件
    map.on("mouseenter", "planes", function (e) {
      map.getCanvas().style.cursor = "pointer";
    });

    //添加hover事件
    map.on("mouseleave", "planes", function (e) {
      map.getCanvas().style.cursor = "";
    });

    //添加管线点击事件
    map.on("click", "pipelines", function (e) {
      console.log("管线点击事件");
      //console.log("管线点击事件", e);
      //console.log(e.features);
      if (e.features.length > 0) {
        let feature = findLineByFeatures(e.features);

        if (props.pipelinePopup) {
          let info = feature.properties.info || {};
          //设置弹窗
          const p = createApp(PipelinePopup, {
            info: info,
          });
          //创建dom，及即组件容器
          const parent = document.createElement("div");
          const component = p.mount(parent);
          let popup = new mapboxgl.Popup({ offset: 25 })
            .setLngLat(e.lngLat)
            .setDOMContent(component.$el)
            .addTo(map);
          popup.on("open", (e) => { });
        }
        clickPipeline(feature);
        //store.commit('app/setMode', 'single');
      }
    });


    //添加高后果区点击事件
    map.on("click", "planes", function (e) {
      let info = e.features[0].properties.info || {};
      info = JSON.parse(info);
      //console.log(info);
      //设置弹窗
      const p = createApp(PlanePopup, {
        info: info,
      });
      //创建dom，及即组件容器
      const parent = document.createElement("div");
      const component = p.mount(parent);
      let popup = new mapboxgl.Popup({ offset: 25 })
        .setLngLat(e.lngLat)
        .setDOMContent(component.$el)
        .addTo(map);
      popup.on("open", (e) => {
        component.setData();
      });

      // console.log('高后果区点击事件', e.features);
      // let info = e.features[0].properties.info || {}
      // info = JSON.parse(info)
      // planeInfo.value = info
      // initPlanePopupDom1.value = true
      // let popup = new mapboxgl.Popup({ offset: 25 }).setLngLat(e.lngLat).setDOMContent(PlanePopupDom1.value.$el).addTo(map);
      //selectedGHGLngLat.value = e.lngLat;
    });

    //测距状态
    let rulerState = false
    //点击缩放按钮
    if (document.querySelector('.mapbox-control-ruler')) {
      document.querySelector('.mapbox-control-ruler').addEventListener('click', function () {
        rulerState = !rulerState
      });
    }

    //测面状态
    let measureState = false
    //点击缩放按钮
    if (document.querySelector('.mapboxgl-ctrl-measure')) {
      document.querySelector('.mapboxgl-ctrl-measure').addEventListener('click', function () {
        rulerState = !rulerState
      });
    }

    //地图点击事件
    map.on("click", (e) => {
      let setBackBole = true;
      const { lng, lat } = e.lngLat;
      let features = map.queryRenderedFeatures(e.point);
      selectedGHGLngLat.value = e.lngLat;
      console.log("map click:", `${lng},${lat}`);
      emit('clickMap',lng,lat)
      // console.log("map click:" + features);
      features.forEach((item) => {
        if (item.source == "pipelines") {
          setBackBole = false;
        }
      });
      //console.log(setBackBole);
      // 当点击的是空白部分
      if (setBackBole) {
        if (rulerState) {
          return
        }
        if (measureState) {
          return
        }
      }
    });

    map.on('dblclick', function (e) {
      map.boxZoom.disable();
      e.preventDefault()
    });

    map.on("zoom", () => {
      //改变大小
      setSize();
      //控制高后果区显示
      setPlaneZoom();
    });
    //改变大小
    setSize();
    //控制高后果区显示
    setPlaneZoom();
    initState = true;
  }); //loaded map
}; //initmap

watch(
  () => {
    return props.center;
  },
  (newVal, oldVal) => {
    console.log(newVal)
    if (!initState) {
      return;
    }
    if (newVal) {
      gisCenter = newVal
      setCenter(newVal);
    }
  }
);

watch(
  () => {
    return props.stations;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      //setStations(newVal);
    }
  }
);

watch(
  () => {
    return props.planes;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      setPlanes(newVal);
    }
  }
);

watch(
  () => {
    return props.pipelines;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      setPipelines(newVal);
    }
  }
);

watch(
  () => {
    return props.areas;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      setAreas(newVal);
    }
  }
);

watch(
  () => {
    return props.markers;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      setMarkers(newVal);
    }
  }
);

watch(
  () => {
    return props.alarms;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      setAlarms(newVal);
    }
  }
);

watch(
  () => {
    return props.detectors;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      setDetectors(newVal);
    }
  }
);

watch(
  () => {
    return props.camera;
  },
  (newVal, oldVal) => {
    if (!initState) {
      return;
    }
    if (newVal) {
      setCamera(newVal);
    }
  }
);

function setSize() {
  let zoom = map.getZoom();

  //设置标志物
  let doms = document.querySelectorAll(".map_marker_img");
  for (let dom of doms) {
    let size = zoom / 12;
    dom.style.transform = `translate(-50%, -100%) scale(${size})`;
  }

  //设置高后果区
  doms = document.querySelectorAll(".map_marker_plane");
  for (let dom of doms) {
    let size = zoom / 12;
    dom.style.transform = `translate(-50%, -50%) scale(${size})`;
  }

  //设置报警
  let doms1 = document.querySelectorAll("#map_alarm");
  for (let dom1 of doms1) {
    let nwidth1 = (50 * zoom) / 12;
    let nheight1 = (50 * zoom) / 12;

    dom1.style.width = nwidth1 + "px";
    dom1.style.height = nheight1 + "px";
  }
}

//设置区域显示隐藏
function setPlaneZoom() {
  let zoom = map.getZoom();

  if (zoom >= 10) {
    /* 高后果区*/
    map.setLayoutProperty("planes", "visibility", "visible");
    map.setLayoutProperty("planes_outline", "visibility", "visible");
    let doms = document.querySelectorAll(".map_plane");
    for (let dom of doms) {
      dom.style.display = "none";
    }
    /* 站库标点 */
    // let domszk = document.querySelectorAll('.dot_name');
    // for (let dom of domszk) {
    //   dom.style.display = 'block';
    // }
  } else {
    /* 高后果区*/
    map.setLayoutProperty("planes_outline", "visibility", "none");
    map.setLayoutProperty("planes", "visibility", "none");
    let doms = document.querySelectorAll(".map_plane");
    for (let dom of doms) {
      dom.style.display = "block";
    }
    /* 站库标点 */
    // let domszk = document.querySelectorAll('.dot_name');
    // for (let dom of domszk) {
    //   dom.style.display = 'none';
    // }
  }
}

/**
 * @description:设置区域
 * @param {*} polygons
 * @return {*}
 */
function setStations(stations) {
  let features = [];
  for (let station of stations) {
    //添加gson线段
    let gson = turf.lineString(station.paths, { name: station.name });
    features.push(gson);
  }
  //gson集合
  let FeatureCollection = turf.featureCollection(features);
  map.getSource("stations").setData(FeatureCollection);

  if (features && features.length > 0) {
    //跳转视窗
    let bbox = turf.bbox(FeatureCollection);
    fitBounds(bbox);
  }
}

function diff(newArr, oldArr) {
  //删除
  let removeArr = _.differenceWith(oldArr, newArr, _.isEqual);
  //添加
  let addarr = _.differenceWith(newArr, oldArr, _.isEqual);
  //更新
  return { removeArr, addarr };
}

/**
 * @description: 设置管道
 * @param {*} pipelines
 * @return {*}
 */
let tweenList = [];
let _pipelines = [];
function setPipelines(pipelines) {
  console.log("Pipelines", pipelines);

  for (var i = 0; i < pipelines.length; i++) {
    pipelines[i].stations = [];
    props.stations.forEach((item, index) => {
      if (pipelines[i].id == item.pid) {
        pipelines[i].stations.push(item)
      }
    })
  }

  let { removeArr, addarr } = diff(pipelines, _pipelines);
  _pipelines = pipelines;
  removePipelines(removeArr);
  addPipelines(addarr);
}


/**
 * @description:添加管道
 * @param {*} pipelines
 * @return {*}
 */
function addPipelines(pipelines) {
  let features = [];
  for (let pipeline of pipelines) {
    let info = pipeline.info;
    let name = pipeline.name;
    let id = pipeline.id;
    if (pipeline.paths && pipeline.paths.length > 1) {
      //添加gson线段
      let line = turf.lineString(pipeline.paths, {
        name: name,
        id: id,
        info: info,
      });
      features.push(line);
    }
  }
  //gson集合
  let FeatureCollection = turf.featureCollection(features);
  map.getSource('pipelines').setData(FeatureCollection);
}

/**
 * @description:删除管道
 * @param {*} pipelines
 * @return {*}
 */
function removePipelines(pipelines) {
  let data = map.getSource("pipelines")._data;
  let features = data["features"];
  for (let i = 0; i < features.length; i++) {
    let item = features[i];
    let id = item["properties"]["id"];
    for (let item1 of pipelines) {
      let id1 = item1["id"];
      if (id == id1) {
        features.splice(i--, 1);
        stopTween(id);
      }
    }
  }
  map.getSource("pipelines").setData(data);
}

//停止动画
function stopTween(id) {
  let i = 0;
  for (let tween of tweenList) {
    if (tween.id == id) {
      tween.stop();
      tweenList.splice(i--, 1);
      return;
    }
    i++;
  }
}

/**
 * @description: 设置高后果区
 * @param {*} planes
 * @return {*}
 */
function setPlanes(planes) {
  console.time("加载平面耗时");
  // console.log("planes", planes);

  let features = [];
  for (let plane of planes) {
    if (plane.paths && plane.paths.length > 1) {
      let info = plane.info;
      //添加gson线段
      let gson = turf.polygon([plane.paths], {
        name: plane.name,
        color: plane.color || "#ff0000",
        info: info,
      });
      features.push(gson);
    }
  }
  //gson集合
  let FeatureCollection = turf.featureCollection(features);
  map.getSource("planes").setData(FeatureCollection);

  //设置图例
  setPlanesMarker(planes);

  //控制显示
  setPlaneZoom();
  setSize();

  console.timeEnd("加载平面耗时");
}

/**
 * @description: 设置高后果区
 * @param {*} planes
 * @return {*}
 */
//现有报警
let _planes = [];
//现有报警实例
let _planesEntitys = [];
function setPlanesMarker(arr) {
  //删除
  let removes = _.differenceWith(_planes, arr, _.isEqual);
  removePlanesMarker(removes);
  //添加
  let addarr = _.differenceWith(arr, _planes, _.isEqual);
  addPlanesMarker(addarr);
  //更新
  _planes = arr;
}

function addPlanesMarker(planes) {
  let features = [];
  for (let plane of planes) {
    let paths = plane.paths;
    if (!paths || paths.length < 1) {
      continue;
    }

    //添加gson线段
    let gson = turf.polygon([plane.paths], {
      name: plane.name,
      color: plane.color || "#ff0000",
    });
    features.push(gson);

    let info = plane.info;
    let id = plane.id;
    let centerPoint = turf.centerOfMass(gson);
    let center = turf.getCoords(centerPoint);

    //level 改变标志著
    let level = plane.info.consequenceLevelValue;

    let imgPath = "/map/images/marker/plane1gif.png";
    if (level == "3") {
      imgPath = "/map/images/marker/plane3gif.png";
    } else if (level == "2") {
      imgPath = "/map/images/marker/plane2gif.png";
    } else if (level == "1") {
      imgPath = "/map/images/marker/plane1gif.png";
    }

    let divNode = document.createElement("div");
    divNode.classList.add(`map_plane`);
    divNode.innerHTML = `<img class="map_marker_plane" style='translate(-50%, -50%);' src="${imgPath}"></img>`;

    //设置弹窗
    const p = createApp(PlanePopup, {
      info: info,
    });
    //创建dom，及即组件容器
    const parent = document.createElement("div");
    const component = p.mount(parent);
    let popup = new mapboxgl.Popup({ offset: 25 }).setDOMContent(component.$el);
    popup.on("open", (e) => {
      //console.log(component);
      component.setData();
    });

    let entity = new mapboxgl.Marker(divNode, { offset: [0, 0] })
      .setLngLat(center)
      .setPopup(popup)
      .addTo(map);
    entity.id = id;
    _planesEntitys.push(entity);
  }
}

function removePlanesMarker(arr) {
  for (let ob of arr) {
    let wm = _planesEntitys.find((ae) => {
      return ae.id == ob.id;
    });
    if (wm) {
      wm.remove();
    }
    _.remove(_planesEntitys, function (x) {
      return _.isEqual(x, wm);
    });
  }
}

/**
 * @description: 设置行政区划
 * @param {*} areas
 * @return {*}
 */
function setAreas(areas) {
  console.time("加载行政区划耗时");

  let mb = [];
  let features = [];
  let features1 = [];
  let features2 = [];
  for (let area of areas) {
    if (area.level == 3) {
      mb = area.paths;
      let gson_dy = turf.polygon([area.paths], {
        name: area.name,
        color: area.color,
      });
      features2.push(gson_dy);
    }
    if (area.display === false) {
      continue;
    }

    //添加gson线段
    let gson = turf.polygon([area.paths], {
      name: area.name,
      color: area.color,
    });
    features.push(gson);
    let geometry = turf.centerOfMass(gson, {
      properties: { name: area.name, color: area.color },
    });
    features1.push(geometry);
  }

  //gson集合
  let FeatureCollection = turf.featureCollection(features);
  map.getSource("areas").setData(FeatureCollection);
  let FeatureCollection_dy = turf.featureCollection(features2);
  map.getSource("areas1").setData(FeatureCollection_dy);
  let FeatureCollection1 = turf.featureCollection(features1);
  map.getSource("areas_name").setData(FeatureCollection1);
  //蒙版图层
  map.addLayer(
    {
      id: "mb-tag",
      type: "fill",
      source: {
        type: "geojson",
        data: {
          type: "Feature",
          geometry: {
            type: "Polygon",
            coordinates: [
              [
                // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                [-180, 90],
                [180, 90],
                [180, -90],
                [-180, -90],
              ],
              mb,
            ],
          },
        },
      },
      paint: {
        // 'fill-color': 'rgba(3, 20, 57, 0.8)',
        "fill-color": "rgba(0, 0, 0, 0.2)",
        // 'fill-opacity': 1 /* 透明度 */,
      },
      layout: {
        visibility: "visible",
      },
    },
    "areas_outline"
  );

  console.timeEnd("加载行政区划耗时");
}

/**
 * @description: 设置图例
 * @return {*}
 */
//现有报警
let _markers = [];
//现有报警实例
let _markerEntitys = [];
//设置报警
function setMarkers(arr) {
  console.log("marker", arr);
  //删除
  let removes = _.differenceWith(_markers, arr, _.isEqual);
  removeMarkers(removes);
  //添加
  let addarr = _.differenceWith(arr, _markers, _.isEqual);
  addMarkers(addarr);
  //更新
  _markers = arr;
}

const emergencyBtn = ref([true, true, true])
function addMarkers(markers) {
  // console.log('markers', markers);

  let markerList = [];
  for (let marker of markers) {
    let id = marker['id'];
    let position = marker['position'];
    let type = marker['type'];
    let name = marker['name'] || '';
    let titleName = name;
    let totalName = name;
    //根据type 改变标志著
    let imgPath = '/map/images/marker';
    let offset = [0, 0];

    let typeName = 'marker';
    switch (type) {
      case 'marker':
        imgPath += '/marker.png';
        offset = [0, 0];
        break;
      case '1080102':
        imgPath += '/DVS.svg';
        typeName = 'dvs'; //DVS
        break;
      case '10305':
        imgPath += '/marker.png';
        titleName = null; //标示桩
        break;
      case '10304':
        imgPath += '/ScenicSpot.svg';
        typeName = 'scenic'; //景点
        break;
      case '10302':
        imgPath += '/well.svg';
        typeName = 'water-well'; //水井
        break;
      case '10301':
        imgPath += '/oilWell.svg';
        typeName = 'oil-well'; //油井
        break;
      case '10303':
        imgPath += '/market.svg';
        typeName = 'mall'; //商厦
        break;
      case '1030601':
        imgPath += '/station.svg';
        typeName = 'station'; //厂站2
        break;
      case '1080201':
        imgPath += '/formaldehyde.svg';
        typeName = 'formaldehyde'; //甲醛
        break;
      case '1080612':
        imgPath += '/house.svg';
        typeName = 'valve'; //阀室
        break;
      case '10306':
        imgPath += '/station.svg';
        typeName = 'station'; //厂站
        break;
      case '1069001':
        imgPath += '/RTU.svg';
        typeName = 'rtu'; //RTU
        break;
      case '1080101':
        imgPath += '/DTS.svg';
        typeName = 'dts'; //DTS
        break;
      case '1080103':
        imgPath += '/DTSS.svg';
        typeName = 'dtss'; //DTSS
        break;
      case '1080301':
        imgPath += '/RTU.svg';
        typeName = 'rtu'; //RTU
        break;
      default:
        imgPath += '/marker.png';
    }

    //标志物下文字
    let textHtml = '';
    if (titleName) {
      textHtml = `<div class='map_text'>${titleName}</div>`;
    }

    var divNode = document.createElement('div');
    divNode.classList.add(`marker_type_${type}`);

    //文字标注
    if (type == '1030701') {
      divNode.innerHTML = `${textHtml}`;
    } else {
      divNode.innerHTML = `<img class="map_marker_img" style='translate(-50%, -100%);' src="${imgPath}"></img>${textHtml}`;
    }

    divNode.addEventListener('click', () => {
      emit('clickMarker', marker);
    });

    //点击弹框
    let popup;
    if (type == '1069001') {
      popup = setRTUPop(position)
    } else {
      let popupDOM = `<div class="map_popup">
            <div class="map_popup_title">
              ${totalName}
            </div>
            <div class="map_popup_subTitle">
              标志物
            </div>
            <div class="map_popup_ontent">
              经度：${position[0]}<br/>
              纬度：${position[1]}
            </div>
          </div>`;
      popup = new mapboxgl.Popup({ offset: 25 }).setHTML(popupDOM);
    }

    let markerEntity = new mapboxgl.Marker(divNode, { offset: offset }).setLngLat(position).setPopup(popup).addTo(map);
    markerEntity.id = id
    markerEntity.level = marker.level;
    markerEntity.type = marker.type;
    markerList.push(markerEntity);
    _markerEntitys.push(markerEntity)
  }
  _markers = markerList;

  //RTU弹框
  function setRTUPop(position, detail) {
    let domId = 'popup-' + new Date().getTime();
    let popupDOM = `<div class="map_rtu_popup">
            <div class="map_rtu_popup_title">
              RTU
            </div>
            <div class="map_rtu_popup_content">
              报警类型: <br/>
              报警时间: <br/>
              报警位置:
            </div>
          </div>`;
    let pp = new mapboxgl.Popup({ offset: 40, closeOnClick: true }).setMaxWidth('350px').setHTML(popupDOM).setLngLat(position).addTo(map);

    // document.getElementById(domId).onclick = function (e) {
    //   const data = e.currentTarget.dataset;
    //   data.domId = domId;
    //   store.commit('app/setAlarmData', JSON.stringify(data));
    // };
    return pp;
  }
}

function removeMarkers(arr) {
  for (let ob of arr) {
    let wm = _markerEntitys.find((ae) => {
      return ae.id == ob.id;
    });
    if (wm) {
      wm.remove();
    }
    _.remove(_markerEntitys, function (x) {
      return _.isEqual(x, wm);
    });
  }
}

//现有报警
let _alarms = [];
//现有报警实例
let _alarmEntitys = [];
//设置报警
function setAlarms(arr) {
  console.log("alarms", arr);
  //删除
  let removes = _.differenceWith(_alarms, arr, _.isEqual);
  removeAlarm(removes);
  //添加
  let addarr = _.differenceWith(arr, _alarms, _.isEqual);
  addAlarm(addarr);
  //更新
  _alarms = arr;
}


/**
 * @description: 新增报警
 * @param {*} arr
 * @return {*}
 */
function addAlarm(arr) {
  //闪烁问题 弹窗遮挡了dom 触发了 鼠标进入移出事件 加上弹窗的判断
  let show = false;
  for (let ob of arr) {
    let id = ob['id'];
    let position = ob['position'] || [];
    let info = ob['info'] || '暂无信息';
    const detail = ob.detail;
    let divNode = document.createElement('div');

    let imgPath = '/map/images/alarm3.json';

    divNode.innerHTML = `<div class='map_alarm_box'><lottie-player
      class="map_alarm_animation"
      id="map_alarm_${id}"
      loop
      mode="normal"
      src="${imgPath}"
      style="width: 40px;height:70px;"
    >
    </lottie-player></div>`;

    divNode.classList.add(`map_alarm_${id}`);

    divNode.addEventListener('click', () => {
      map.flyTo({
        center: position,
      });
      emit('clickAlarm', ob);
      mitt.emit('clickAlarm', ob);
    });

    let popup = setAlarmPopup(position, detail);
    //鼠标移入显示报警提示
    // divNode.addEventListener('mouseenter', event => {
      
    //   if (!show) {
    //     popup = setAlarmPopup(position, detail);
    //   }
    //   show = true;
    //   event.stopPropagation();
    // });

    //鼠标移出显示报警提示
    // divNode.addEventListener('mouseleave', event => {
    //   if (popup) {
    //     console.log(event.relatedTarget)
    //     if (event.relatedTarget.className != 'map_alarm_content') {
    //       pp.remove();
    //       show = false;
    //     } else {
    //       event.relatedTarget.addEventListener('mouseleave', () => {
    //         pp.remove();
    //         show = false;
    //       });
    //     }
    //   }
    //   event.stopPropagation();
    // });

    let entity = new mapboxgl.Marker(divNode, { offset: [0, 0] })
    .setLngLat(position)
    .setPopup(popup)
    .addTo(map);

    entity.id = id;
    _alarmEntitys.push(entity);
  }

  //报警弹框
  function setAlarmPopup(position, detail) {
    let { dom: dom } = createVueComponent.createDom(AlarmPopup,{
      props:{
        info:detail
      }
    })
    let pp = new mapboxgl.Popup({ offset: 40, closeOnClick: true }).setDOMContent(dom).setMaxWidth('350px').setLngLat(position).addTo(map);
    return pp;
  }
}

/**
 * @description: 删除报警
 * @param {*} arr
 * @return {*}
 */
function removeAlarm(arr) {
  for (let ob of arr) {
    let wm = _alarmEntitys.find((ae) => {
      return ae.id == ob.id;
    });
    if (wm) {
      wm.remove();
    }
    _.remove(_alarmEntitys, function (x) {
      return _.isEqual(x, wm);
    });
  }
}

let _detectors = [];
let _detectorsEntitys = [];
function setDetectors(arr) {
  console.log("_detectors", arr);
  //删除
  let removes = _.differenceWith(_detectors, arr, _.isEqual);
  removeDetectors(removes);
  //添加
  let addarr = _.differenceWith(arr, _detectors, _.isEqual);
  addDetectors(addarr);
  //更新
  _detectors = arr;
}


/**
 * @description: 新增探测仪
 * @param {*} arr
 * @return {*}
 */
function addDetectors(arr) {
  //闪烁问题 弹窗遮挡了dom 触发了 鼠标进入移出事件 加上弹窗的判断
  let show = false;
  for (let ob of arr) {
    let id = ob['id'];
    let position = ob['position'] || [];
    let info = ob['info'] || '暂无信息';
    const detail = ob.detail;
    let divNode = document.createElement('div');

    let imgPath = '/map/images/marker/detector.png';

    divNode.classList.add(`marker_detector_${id}`);
    divNode.innerHTML = `<img class="map_marker_img" style='translate(-50%, -100%);' src="${imgPath}"></img>`;
    divNode.addEventListener('click', () => {
      map.flyTo({
        center: position,
      });
      emit('clickDetectors', ob);
      mitt.emit('clickDetectors', ob);
    });

    let popup = setPopup(position, detail);

    let entity = new mapboxgl.Marker(divNode, { offset: [0, 0] })
    .setLngLat(position)
    .setPopup(popup)
    .addTo(map);

    entity.id = id;
    _alarmEntitys.push(entity);
  }

  //报警弹框
  function setPopup(position, detail) {
    let { dom: dom } = createVueComponent.createDom(DetectorPopup,{
      props:{
        info:detail
      }
    })
    let pp = new mapboxgl.Popup({ offset: 40, closeOnClick: true }).setDOMContent(dom).setMaxWidth('350px').setLngLat(position).addTo(map);
    return pp;
  }
}

/**
 * @description: 删除
 * @param {*} arr
 * @return {*}
 */
function removeDetectors(arr) {
  for (let ob of arr) {
    let wm = _detectorsEntitys.find((ae) => {
      return ae.id == ob.id;
    });
    if (wm) {
      wm.remove();
    }
    _.remove(_detectorsEntitys, function (x) {
      return _.isEqual(x, wm);
    });
  }
}


//现有报警
let _camera = [];
//现有报警实例
let _cameraEntitys = [];
//设置报警
function setCamera(arr) {
  //console.log("camera", arr);
  //删除
  let removes = _.differenceWith(_camera, arr, _.isEqual);
  removeCamera(removes);
  //添加
  let addarr = _.differenceWith(arr, _camera, _.isEqual);
  addCamera(addarr);
  //更新
  _camera = arr;
}
/**
 * @description: 删除摄像头
 * @param {*} arr
 * @return {*}
 */
function removeCamera(arr) {
  for (let ob of arr) {
    let wm = _cameraEntitys.find((ae) => {
      return ae.id == ob.id;
    });
    if (wm) {
      wm.remove();
    }
    _.remove(_cameraEntitys, function (x) {
      return _.isEqual(x, wm);
    });
  }
}

function addCamera(arr) {
  for (let ob of arr) {
    let id = ob["id"];
    let name = ob["name"] || "暂无名称";
    let url = ob["info"]["url"];
    let ele = document.createElement("div");
    let coord = ob["position"] || [];
    ele.classList.add(`marker_type_camera`);
    ele.classList.add(`marker_type_camera${id}`);
    ele.innerHTML = `<img class="map_marker_img" style='translate(-50%, -100%);' src="/map/images/marker/shexiang.svg"></img>`; /* ${depotName} */
    ele.addEventListener("click", (event) => {
      //阻止冒泡
      event.stopPropagation();
      videoTitle.value = name;
      showVideoBox.value = true;
      // 正式地址
      mitt.emit(
        "videoInit",
        { src: url, type: "flv" },
        //{src:"http://10.146.227.50:18080/live?port=1935&app=liveapp&stream=ch33",type:"flv"}
      );
      // 测试
      //mitt.emit("videoInit", {src:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',type:"mp4"});
    });

    let entity = new mapboxgl.Marker(ele, { offset: [0, 0] })
      .setLngLat(coord)
      .addTo(map);
    entity.id = id;
    _cameraEntitys.push(entity);
  }
}

/**
 * @description: 根据管道名称触发点击事件
 * @param {*} name
 * @return {*}
 */
function fireClickPipeline(name) {
  let feature = findLineByName(name);
  clickPipeline(feature);
}

function fireclickPipelinesByfly(name) {
  let feature = findLineByName(name);
  let sbox = turf.bbox(feature);
  fitBounds(sbox);
}

/**
 * @description: 点击管道事件
 * @param {*} feature
 * @return {*}
 */
function clickPipeline(feature) {
  //console.log(feature);

  //跳转视窗
  let sbox = turf.bbox(feature);
  fitBounds(sbox);
  //改变管道颜色
  map.setFilter("pipelines1", ["==", "name", feature.properties.name]);
  mitt.emit("clickPipeline", feature.initProp);
}

/**
 * @description: 查找线段
 * @return {*}
 */
function findLineByFeatures(features) {
  //获得所有管道
  let pp = map.getSource("pipelines")._data.features;

  // 获取原始属性
  let initProp = {};
  let pipeline = pp.find(function (item) {
    for (let f of features) {
      let name1 = f.properties.name;
      let name2 = item.properties.name;
      if (name1 == name2) {
        initProp = findPropByPipeName(props.pipelines, name1);
        return true;
      }
    }
    return false;
  });
  pipeline.initProp = initProp;
  return pipeline;
}

function findPropByPipeName(pipelines, name) {
  for (let i = 0; i < pipelines.length; i++) {
    if (name === pipelines[i].name) {
      return pipelines[i];
    }
  }
  return false;
}

/**
 * @description: 查找线段
 * @return {*}
 */
function findLineByName(name) {
  //获得所有管道
  const source = map.getSource("pipelines");
  if (!source && !source1) return;
  let pp = source._data.features;
  let pipeline = pp.find(function (item) {
    let name2 = item.properties.name;
    if (name == name2) {
      return true;
    }
    return false;
  });
  return pipeline;
}

/*
 * @Description:
 * @Author: Dxcr
 * @Date: 2022-09-13
 * @LastEditTime: 2022-09-13
 * @LastEditors: Dxcr
 */
function fitBounds(bbox) {
  let box = [
    [bbox[0], bbox[1]],
    [bbox[2], bbox[3]],
  ];
  map.fitBounds(box, {
    padding: { top: 100, bottom: 100, left: 480, right: 480 },
    maxZoom: 16,
    pitch: 25,
  });
}

/**
 * @description: 切换图层
 * @return {*}
 */
function changeMapLayer(index) {
  if (index == 0) {
    //天地图卫星图
    mapList.forEach((item, index) => {
      let showStatus = "none";
      if (item.layerId == "td_satellite_CVA") {
        showStatus = "visible";
      } else if (item.layerId == "td_satellite_Vec") {
        showStatus = "visible";
      }
      //console.log(showStatus);

      map.setLayoutProperty(item.layerId, "visibility", showStatus);
    });
  } else if (index == 1) {
    //天地图矢量图
    mapList.forEach((item, index) => {
      let showStatus = "none";
      if (item.layerId == "td_vetor_CVA") {
        showStatus = "visible";
      } else if (item.layerId == "td_vetor_Vec") {
        showStatus = "visible";
      }
      map.setLayoutProperty(item.layerId, "visibility", showStatus);
    });
  }
}

defineExpose({
  fireClickPipeline,
});

//根据类型隐藏标志物
function hideMarkerByType(type) {
  let doms = document.querySelectorAll(`.marker_type_${type}`);
  for (let dom of doms) {
    dom.style.display = "none";
  }
}

//根据类型显示标志物
function showMarkerByType(type) {
  let doms = document.querySelectorAll(`.marker_type_${type}`);
  for (let dom of doms) {
    dom.style.display = "block";
  }
}

//隐藏高后果区
function hideArea() {
  map.setLayoutProperty("planes", "visibility", "none");
  map.setLayoutProperty("planes_outline", "visibility", "none");
}

//显示高后果区
function showArea() {
  map.setLayoutProperty("planes", "visibility", "visible");
  map.setLayoutProperty("planes_outline", "visibility", "visible");
}

// 隐藏站库
function hideStation() {
  let doms = document.querySelectorAll(`.marker_type_station`);
  for (let dom of doms) {
    dom.style.display = "none";
  }
  mitt.emit("SearchIconShow", false);
}

function removeStation() {
  let doms = document.querySelectorAll(`.marker_type_station`);
  for (let dom of doms) {
    dom.remove()
  }
}

function showStation() {
  let doms = document.querySelectorAll(`.marker_type_station`);
  for (let dom of doms) {
    dom.style.display = "block";
  }
  mitt.emit("SearchIconShow", true);
}

/**
 * @description: 点击多条管道
 * @param {*} feature
 * @return {*}
 */
function clickPipelinesByNames(names) {
  if (names.length) {
    let features = [];
    for (let name of names) {
      let feature = findLineByName(name);
      if (!feature) {
      } else {
        features.push(feature);
      }
    }

    //gson集合

    let FeatureCollection = turf.featureCollection(features);

    //跳转视窗
    let sbox = turf.bbox(FeatureCollection);
    fitBounds(sbox);
    //多选
    map.setFilter("pipelines1", ["in", ["get", "name"], ["literal", names]]);
  }
}

/**
 * @description: 取消点击管道
 * @param {*}
 * @return {*}
 */
function cancelPipelines() {
  map.setFilter("pipelines1", ["==", "selected", true]);
  stopTween();
}

function setCenter(center) {
  map.flyTo({
    center: center,
    zoom: 9,
  });
}

/** 
 * @description: 回到地图初始位置
 * @param {*}
 * @return {*}
 */
function resetCenter() {
  map.flyTo({
    center: gisCenter,
    zoom: 9,
  });
}

/* 
高后果缩放区域
 */
function flyToGHG() {
  //console.log(selectedGHGLngLat.value);
  if (selectedGHGLngLat.value && map.getZoom() < 12) {
    map.flyTo({
      center: selectedGHGLngLat.value,
      zoom: 12,
      speed: 0.6,
    });
  }
}
// 点击视频
const showVideoBox = ref(false);
const videoTitle = ref("");
function selectCamera(tipData) {
  if (tipData.videoPath) {
    videoTitle.value = tipData.consequenceName + "视频";
    showVideoBox.value = true;
    if (tipData.consequenceMonitor) {
      mitt.emit("videoInit", { src: tipData.consequenceMonitor, type: "flv" });
    } else {
      mitt.emit("videoInit", { src: tipData.videoPath, type: "mp4" });
    }
    //mitt.emit("videoInit", {src:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',type:"mp4"});
  } else {
    ElMessage({
      message: "当前高后果区暂无视频",
      type: "warning",
    });
  }
}


mitt.on("hideMarkerByType", hideMarkerByType);
mitt.on("showMarkerByType", showMarkerByType);
mitt.on('hideArea', hideArea);
mitt.on('showArea', showArea);
mitt.on("hideStation", hideStation);
mitt.on("showStation", showStation);

mitt.on("clickPipelineByName", fireClickPipeline);
mitt.on("clickPipelinesByNames", clickPipelinesByNames);

mitt.on("clickPipelinesByfly", fireclickPipelinesByfly);

mitt.on("cancelPipelines", cancelPipelines);
mitt.on("resetCenter", resetCenter);
mitt.on("flyToGHG", flyToGHG);
mitt.on("selectCamera", selectCamera);

mitt.on("VideoBoxShow", function (data) {
  videoTitle.value = data.monitoringPointsName;
  showVideoBox.value = true;
  // 正式地址
  mitt.emit("videoInit", { src: data.url, type: "flv" });
});
mitt.on("HomeControlClick", resetCenter);
</script>

<style lang="scss" scoped>
.MapBox_contaniner {
  width: 100%;
  height: 100%;
}

.d-mapbox {
  width: 100%;
  height: 100%;
}

:deep(.mapboxgl-ctrl) {
  // display: none;
}

//报警 弹出层
:deep(.map_alarm) {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: rgba(52, 15, 10, 0.6);
  border: 1px solid rgba(255, 51, 51, 0.45);
  box-shadow: inset 0px 0px 5px 0.5px rgba(255, 64, 3, 0.65);
}

:deep(.map_alarm_title) {
  font-weight: bold;
  color: #ff3104;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 14px;
  flex: 0 0 120px;
  min-width: 45px;
}

:deep(.map_alarm_content) {
  border-left: 1px solid #ff0404;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
}

:deep(.map_alarm_line) {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 2.25px;
  height: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 1) 100%);
}

//标志物
:deep(.mapboxgl-marker) {
  cursor: pointer;
}

:deep(.map_marker_img) {
  position: absolute;
  left: 0;
  transform: translate(-50%, -100%);
}

//标志物 弹出框
:deep(.map_popup_title) {
  font-size: 20px !important;
  font-weight: bolder;
  color: rgb(255, 255, 255);
}

:deep(.map_alarm_animation) {
  position: absolute;
  transform: translate(-50%, -100%);
}

:deep(.map_popup_subTitle) {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.7);
}

:deep(.map_popup_content) {
  margin-top: 5px;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 1);
}

:deep(.mapboxgl-popup-content) {
  background-color: inherit !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

:deep(.map_popup) {
  // background-color: rgba(8, 83, 99, 0.5);
  border-radius: 0.5rem;
  box-shadow: inset 0px 0px 10px rgb(0 214 220 / 60%);
  padding: 10px 15px;
  background: rgba(5, 47, 66, 0.7);
  border: 1px solid rgba(42, 255, 235, 0.45);
  //   box-shadow: inset 0px 0px 5px 0.5px rgba(5, 66, 61, 0.65);

  // background-color: rgba(5, 47, 66, 0.7) !important;
  // border: 1px solid #999;
}

//视频监控
:deep(.map_camera) {
  transform: translate(0, -50%);
}

:deep(.map_camera_bg) {
  background: url(/src/assets/map/images/monitor.png) no-repeat 0 0;
  background-size: 100% 100%;
  width: 18rem;
  height: 12rem;
}

:deep(.map_camera_name) {
  font-size: 12px;
  position: absolute;
  top: 0.5rem;
  left: 3.9rem;
}

//视频监控 弹出框
:deep(.map_camera_popup) {
  width: 43rem;
  font-size: 20px !important;
  font-weight: bolder;
  color: rgb(255, 255, 255);
}

:deep(.map_camera_popup_subTitle) {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.7);
}

:deep(.map_camera_popup_content) {
  color: rgba(255, 255, 255, 1);
  width: 40rem;
  height: 22rem;
}

:deep(.map_camera_popup) {
  border-radius: 0.5rem;
  padding: 10px 15px;
  background: rgba(11, 11, 11, 0.9);
  border: 1px solid rgba(5, 47, 66, 0.7);
}

:deep(.mapboxgl-popup-tip) {
  display: none;
}

:deep(.mapboxgl-popup-close-button) {
  display: none;
}

:deep(.map_text) {
  position: absolute;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  left: 50%;
  margin-top: 2px;
  font-size: 12px;
  color: #fff;
  text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
}

:deep(.mapboxgl-popup) {
  position: absolute;
  top: 0;
}

//控件位置 下个项目删除
:deep(.switchLayer_container) {
  position: absolute;
  left: 45rem !important;
  top: 7.9rem !important;
  z-index: 13;
}

:deep(.changePipeline_container) {
  left: 45rem !important;
  top: 9rem !important;
  z-index: 13;
}

:deep(.mapboxgl-ctrl-top-left) {
  left: 45rem !important;
  top: 8rem !important;
  z-index: 13;
}

:deep(.mapboxgl-ctrl-bottom-right) {
  right: 0rem !important;
  bottom: 0rem !important;
  z-index: 13;
}
</style>
<style lang="scss">
@import "@/mapbox/mapbox/mapbox-gl.css";
@import "@/mapbox/mapbox/mapbox-gl-draw.css";
</style>
